<%@ include file="/static/include.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>用户注册</title>
<%-- <script src="${cmpRoot}/regist_index.js"></script> --%>
</head>
<!-- apply the module and controller to our body so angular is applied to that -->
<body>
	<div class="container" ng-app="formApp">
		<div class="col-md-6 col-md-offset-3"  ng-controller="formController">
			<!-- PAGE TITLE -->
			<div class="page-header">
				<h1>
					<span class="glyphicon glyphicon-tower"></span>用户注册
				</h1>
			</div>
			<!-- SHOW ERROR/SUCCESS MESSAGES -->
			<div id="message" class="alert alert-success"  ng-show="message">{{ message }}</div>
			<div id="errorMessages" class="alert alert-warning" ng-show="errorMessage"><span class="text-danger">{{errorMessage }}</span></div>

			<!-- FORM  novalidate-->
			<form ng-submit="processForm()" name="myForm" role="form">
				<!-- NAME -->
				<div id="username-group" class="form-group">
					<label><code>*</code>账号</label> 
					<input type="text" name="username"
						class="form-control" placeholder="登录账号"
						ng-model="formData.username" required maxlength="10">
				</div>
				<div id="name-group" class="form-group">
					<label><code>*</code>用户名</label> 
					<input type="text" name="name" class="form-control" placeholder="显示名称"
						ng-model="formData.name" required maxlength="10">
				</div>

				<div id="email-group" class="form-group">
					<label>电子邮件</label>
					<input type="email" name="email" class="form-control" ng-model="formData.email">
					<span  class="help-block" ng-show="myForm.email.$dirty && myForm.email.$invalid">
						 <span  style="color:red"  ng-show="myForm.email.$error.email">错误的电子邮件格式</span>
					</span> 
				</div>

				<div id="password-group" class="form-group">
					<label><code>*</code>密码</label> 
					<input type="password" name="password" class="form-control" 
					ng-model="formData.password" required maxlength="10">
				</div>
				
				<div id="repassword-group" class="form-group">
					<label><code>*</code>重复密码</label> 
					<input type="password" name="repassword" class="form-control" 
					ng-model="formData.repassword" required maxlength="10">
					<span  class="help-block">
						 <span style="color:red" ng-show="pwderror">{{pwderror}}</span>
					</span>
				</div>

				<!-- SUBMIT BUTTON -->
				<button type="submit" class="btn btn-success" ><!-- ng-disabled="myForm.$invalid" -->
					<span class="glyphicon glyphicon-flash"></span> 点击注册!
				</button>
			</form>

			<!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->
			<pre>{{ formData }}</pre>
<!-- 			<pre>{{ myForm.$invalid }}</pre>
			<pre>{{ myForm.email.$invalid }}</pre> -->
		</div>
	</div>
</body>
<script type="text/javascript">
//alert(keter.path);
console.log(keter.reqRoot);
// define angular module/app
		var formApp = angular.module('formApp', []);
		// 控制器
		formApp.controller('formController', ['$scope', '$http', function($scope, $http){
			  formController($scope, $http);
		}]);
		
		// create angular controller and pass in $scope and $http
		function formController($scope, $http) {
			// create a blank object to hold our form information
			// $scope will allow this to pass between controller and view
			$scope.formData = {};
			// process the form
			$scope.processForm = function() {
				console.log($scope.formData.password);
				console.log($scope.formData.repassword);
				if($scope.formData.password!=$scope.formData.repassword){
					$scope.pwderror = "两次输入密码内容不匹配！";
					return;
				}
				$http({
			        method  : 'POST',
			        url     : keter.path+'/regist/regist',
			        data    : $.param($scope.formData),  // pass in data as strings
			        // set the headers so angular passing info as form data (not request payload)
			        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  
			    })
			        .success(function(data) {
		        	    if (data.success) {
			                $scope.message = "注册成功！";
			                $scope.errorMessage = "";
			            } else {
			            	$scope.errorMessage = data.message;
			            	 $scope.message = "";
			            }
			        });
			};
		}
</script>
</html>